<template>
    <view class="mask" @click="onClose" @touchmove.stop.prevent="moveHandle">
        <view class="mask_content">
            <view class="mask_content_cvs">
                <canvas canvas-id="cvs" style="width: 305px; height: 535px" />
            </view>
            <!-- <image src="../../static/img/close_ss.png" class="close" /> -->
        </view>
        <view class="bottom_option_view">
            <view class="menu_view">
                <button
                    class="share-button"
                    open-type="share"
                    @click="onClose"
                    style="display: flex; flex-direction: column; align-items: center"
                >
                    <image style="height: 84rpx; width: 84rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wechat.png"></image>
                    <label style="margin-top: 16rpx; color: #333333; font-size: 24rpx">微信好友</label>
                </button>
                <view style="display: flex; flex-direction: column; align-items: center" @click="saveImage">
                    <image style="height: 84rpx; width: 84rpx" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/saveicon.png"></image>
                    <label style="margin-top: 16rpx; color: #333333; font-size: 24rpx">保存图片</label>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
    name: "home-share-report",
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    methods: {
        moveHandle: function () {
            return false;
        },
        onClose() {
            this.$emit("close", false);
        },
        saveImage() {
            uni.canvasToTempFilePath(
                {
                    canvasId: "cvs",
                    quality: 1,
                    width: 305,
                    height: 535,
                    success({ tempFilePath: filePath }) {
                        uni.saveImageToPhotosAlbum({
                            filePath,
                            success() {
                                this.$emit("close", false);
                                uni.showToast({
                                    title: "图片保存成功",
                                    icon: "none",
                                });
                            },
                            fail(e) {
                                uni.openSetting();
                                if (e.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
                                    uni.showToast({
                                        title: "请授权图片保存到相册",
                                        icon: "none",
                                    });
                                } else {
                                    uni.showToast({
                                        title: "图片保存失败",
                                        icon: "none",
                                    });
                                }
                            },
                        });
                    },
                },
                this
            );
        },
        setCtxBuZuBtn(ctx, x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 9, (-Math.PI * 270) / 180, (-Math.PI * 90) / 180);
            ctx.lineTo(280, y - 9);
            ctx.arc(280, y, 9, (Math.PI * 270) / 180, (Math.PI * 90) / 180);
            ctx.closePath();
            ctx.setStrokeStyle("#FF822E");
            ctx.stroke();
            ctx.setFillStyle("rgba(255,130,46,0.06)");
            ctx.fill();
            ctx.setFillStyle("#FF822E");
            ctx.fillText("不足", x, y - 5.5);
        },
        setCtxBiaoZhunBtn(ctx, content, x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 9, (-Math.PI * 270) / 180, (-Math.PI * 90) / 180);
            ctx.lineTo(280, y - 9);
            ctx.arc(280, y, 9, (Math.PI * 270) / 180, (Math.PI * 90) / 180);
            ctx.closePath();
            ctx.setStrokeStyle("rgba(0, 153, 119, 0.2)");
            ctx.stroke();
            ctx.setFillStyle("rgba(0,153,119,0.06)");
            ctx.fill();
            ctx.setFillStyle("#009977");
            ctx.fillText(content, x, y - 5.5);
        },
        setCtxYouXiuBtn(ctx, x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 9, (-Math.PI * 270) / 180, (-Math.PI * 90) / 180);
            ctx.lineTo(280, y - 9);
            ctx.arc(280, y, 9, (Math.PI * 270) / 180, (Math.PI * 90) / 180);
            ctx.closePath();
            ctx.setStrokeStyle("#009977");
            ctx.stroke();
            ctx.setFillStyle("#009977");
            ctx.fill();
            ctx.setFillStyle("#fff");
            ctx.fillText("优秀", x, y - 5.5);
        },
        setCtxPianPangBtn(ctx, x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 9, (-Math.PI * 270) / 180, (-Math.PI * 90) / 180);
            ctx.lineTo(280, y - 9);
            ctx.arc(280, y, 9, (Math.PI * 270) / 180, (Math.PI * 90) / 180);
            ctx.closePath();
            ctx.setStrokeStyle("#FF413B");
            ctx.stroke();
            ctx.setFillStyle("rgba(255,65,59,0.06)");
            ctx.fill();
            ctx.setFillStyle("#FF413B");
            ctx.fillText("偏胖", x, y - 5.5);
        },
        setCtxPangBtn(ctx, x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 9, (-Math.PI * 270) / 180, (-Math.PI * 90) / 180);
            ctx.lineTo(280, y - 9);
            ctx.arc(280, y, 9, (Math.PI * 270) / 180, (Math.PI * 90) / 180);
            ctx.closePath();
            ctx.setStrokeStyle("#FF413B");
            ctx.stroke();
            ctx.setFillStyle("#FF413B");
            ctx.fill();
            ctx.setFillStyle("#fff");
            ctx.fillText("胖", x + 5, y - 5.5);
        },
        getBtnTheme(ctx, content, x, y) {
            switch (content) {
                case "不足":
                    return this.setCtxBuZuBtn(ctx, x, y);
                case "优秀":
                    return this.setCtxYouXiuBtn(ctx, x, y);
                case "偏胖":
                    return this.setCtxPianPangBtn(ctx, x, y);
                case "胖":
                    return this.setCtxPangBtn(ctx, x, y);
                default:
                    return this.setCtxBiaoZhunBtn(ctx, content, x, y);
            }
        },
    },
    watch: {
        data(newValue) {
            if (Object.keys(newValue).length) {
                const ctx = uni.createCanvasContext("cvs", this);
                ctx.clearRect(0, 0, 305, 535);
                ctx.drawImage("/static/img/share-pc-bg.png", 0, 0, 305, 100);
                ctx.setFillStyle("#234941");
                ctx.setTextBaseline("top");
                ctx.setFontSize(36);
                ctx.fillText(newValue.score, 20, 50);
                const x = ctx.measureText(newValue.score + "").width + 18 + 5;
                ctx.setFontSize(13);
                ctx.fillText("分", x, 68);
                ctx.drawImage("/static/img/homeuserdata/user_data_qipao.png", x + 25, 46, 32, 17);
                ctx.setFillStyle("#FFFFFF");
                ctx.setFontSize(11);
                ctx.fillText(newValue.fatLevel || "未知", x + 25 + 6, 49);
                ctx.setFillStyle("#fff");
                ctx.fillRect(0, 100, 305, 535);
                let y = 110;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("体脂率", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.bodyFatRatio.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.bodyFatRatio.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("BMI", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.bmi.value || 0}kg/㎡`, 200, y);
                this.getBtnTheme(ctx, newValue.bmi.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("肌肉量", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.muscleWeight.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.muscleWeight.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("BMR", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.bmr.value || 0}卡路里`, 200, y);
                this.getBtnTheme(ctx, newValue.bmr.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("骨量", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.boneWeight.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.boneWeight.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("蛋白质", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.protein.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.protein.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("皮下脂肪率", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.subcutaneousFatRat.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.subcutaneousFatRat.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("内脏脂肪", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.visceralFat.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.visceralFat.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("体水分率", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.bodyMoistureContent.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.bodyMoistureContent.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("去脂体重", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.fatFreeWeight.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.fatFreeWeight.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("脂肪量", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(`${newValue.fatMass.value || 0}%`, 200, y);
                this.getBtnTheme(ctx, newValue.fatMass.level || "未知", 258, y + 4);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("肥胖等级", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(newValue.fatLevel || "未知", 200, y);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("身体类型", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(newValue.bodyLevel || "未知", 200, y);
                ctx.beginPath();
                ctx.setLineWidth(2);
                y = y + 11 + 10;
                ctx.moveTo(15, y);
                ctx.lineTo(290, y);
                ctx.closePath();
                ctx.setStrokeStyle("#F7F7F7");
                ctx.stroke();
                y += 10;
                ctx.setFillStyle("#333333");
                ctx.setFontSize(11);
                ctx.fillText("身体年龄", 15, y);
                ctx.setFillStyle("#666666");
                ctx.fillText(newValue.bodyAge || "未知", 200, y);
                ctx.draw();
            }
        },
    },
};
</script>

<style>
.mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}
.bottom_option_view {
    position: absolute;
    bottom: 0;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(38, 43, 49, 0.06);
    height: 110px;
    width: 100%;
}
.menu_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    margin-left: 160rpx;
    width: calc(100% - 320rpx);
}
.share-button {
    margin: 0;
    background: #fff;
}
.mask_content {
    position: absolute;
    width: 100%;
    bottom: 125px;
    display: flex;
    justify-content: center;
}
.mask_content_cvs {
    overflow: hidden;
    border-radius: 8px;
    width: 305px;
}
.close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -35px;
    right: 35px;
}
</style>
